<template>
  <div class="spaceRatio"
       ref="spaceRatio"></div>
</template>

<script>
import Bus from "../utils/bus.js"
export default {
  data () {
    return {
      cj: [{
        // 对象名字，用以判断加载数据
        name: '江宁',
        // 具体echart数据,每个表结构一样，需要从U1-U8,
        chartData: [
          // 8个对象，每个对象里面6个参数
          {
            // 面板显示层数,U1-U8
            floor: 'U1',
            // 面板显示的深度,越往下深度越深
            depth: '5m',
            // 左边进度条宽度,不要小于-110
            leftData: -110,
            // 右边进度条宽度,不要大于110
            rightData: 110,
            // 该层总面积百分比，U1-U8加起来最好等于100%
            persent: '99%',
            // 实际面积，楼层越往下面积越小
            square: '24.94W',
            // 功能区参数
            option: [
              {
                name: '商业',
                value: '60',
                color: "#186beb"
              },
              {
                name: '交通',
                value: '20',
                color: "#ff7b11"
              },
              {
                name: '公共',
                value: '35',
                color: "#11ff6b"
              },
              {
                name: '工业',
                value: '30',
                color: "#787878",

              },
              {
                name: '居住',
                value: '30',
                color: "#a45b0d"
              },
              {
                name: '市政',
                value: '40',
                color: "#4240b7"
              },
              {
                name: '防灾',
                value: 15,
                color: "#ff0000"
              }


            ]
          },
          {
            // 面板显示层数
            floor: 'U2',
            // 面板显示的深度
            depth: '10m',
            // 左边进度条宽度
            leftData: -90,
            // 右边进度条宽度
            rightData: 90,
            // 该层总面积百分比
            persent: '30%',
            // 实际面积
            square: '20.94W'
          },
          {
            // 面板显示层数
            floor: 'U3',
            // 面板显示的深度
            depth: '10m',
            // 左边进度条宽度
            leftData: -90,
            // 右边进度条宽度
            rightData: 70,
            // 该层总面积百分比
            persent: '20%',
            // 实际面积
            square: '18.94W'
          }
        ]
      }]
    }
  },
  mounted () {
    this.spaceRatio(this.cj[0].chartData[0].option[1].value);
  },
  methods: {
    spaceRatio () {
      const myChart = this.$echarts.init(this.$refs["spaceRatio"]);

      myChart.setOption({
        series: [
          {
            type: "treemap",
            data: [
              {
                name: "商业",
                value: 60,
                itemStyle: {
                  color: "#186beb" //设置单个矩形的颜色
                }
              },
              {
                name: "交通",
                value: 20,
                itemStyle: {
                  color: "#ff7b11" //设置单个矩形的颜色
                }
              },
              {
                name: "公共",
                value: 35,
                itemStyle: {
                  color: "#11ff6b" //设置单个矩形的颜色
                }
              },
              {
                name: '工业',
                value: 30,
                itemStyle: {
                  color: "#787878" //设置单个矩形的颜色
                }
              },
              {
                name: "居住",
                value: 25,
                itemStyle: {
                  color: "#a45b0d" //设置单个矩形的颜色
                }
              },
              {
                name: "市政",
                value: 40,
                itemStyle: {
                  color: "#4240b7" //设置单个矩形的颜色
                }
              },
              {
                name: "防灾",
                value: 15,
                itemStyle: {
                  color: "#ff0000" //设置单个矩形的颜色
                }
              },
            ],
            roam: "false", //禁用拖拽
            width: "100%", //宽度默认80%
            height: "100%", //高度默认80%
            breadcrumb: false, //不显示下方面包屑导航
            nodeClick: false
          }
        ]
      });
      myChart.on("click", function (params) {
        Bus.$emit('singleType', params.name)
      });
    }
  }
};
</script>